如何在PC端项目中，嵌入H5页面（vue移动端适配）

您所在的位置：网站首页 › vue pc端ui框架 › 如何在PC端项目中，嵌入H5页面（vue移动端适配）

如何在PC端项目中，嵌入H5页面（vue移动端适配）

2023-09-03 20:36| 来源: 网络整理| 查看: 265

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天

背景

一直以来我都负责写公司基于vue的web pc端的代码，但是最近的某个项目，公司要求出几个移动端页面。起初大家想的是直接弄一个app，但是很快就被否定了，于是决定在pc端嵌入H5页面。那么pc端中嵌入h5页面会存在哪些问题呢？

第一：UI框架的适配问题

element-ui是无法很好的适配移动端的，于是我第一时间想到的是vantUI，由于只有几个页面，所以为了不必要的引入，我采取的所有组件局部导入，vantUI配置

下载

npm i vant@latest-v2 -S

引入vant样式（main.js）

import 'vant/lib/index.css';

局部导入组件 // 使用 // 导入 import {Form, Field, CellGroup,Button,Notify,Popup} from 'vant' // 注册 components:{ lanSelect, [Form.name]:Form, [Field.name]:Field, [CellGroup.name]:CellGroup, [Button.name]:Button, [Popup.name]:Popup, [Notify.Component.name]: Notify.Component, }, 第二：移动端适配

以前也开发过移动端项目，当时采取的适配方案是lib-flexible+postcss-px2rem方案，但是结合现在的项目来看是不合适的，因为现在这个项目H5页面只是嵌入页面，98%的页面还是pc端页面。于是我就想，有没有可以有什么方案是可以既可以自动换算单位，又可以只换算指定的那几个页面的方案。只能说踏破铁鞋无觅处，得来全不费功夫。

推荐文章：使用postcss-px-to-viewport做移动端适配 postcss-px-to-viewport

贴上我的postcss.config.js

const path = require('path'); module.exports = ({ webpack }) => { const viewWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750; return { plugins: { autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等 "postcss-px-to-viewport": { unitToConvert: "px", // 要转化的单位 viewportWidth: 375, // UI设计稿的宽度 unitPrecision: 6, // 转换后的精度，即小数点位数 propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换 viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw selectorBlackList: [], // 指定不转换为视窗单位的类名， minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换 mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false exclude: [/views/,/node_modules/,/components/,/public/,/api/,/assets/,/filters/,/router/,/service/,/store/,/App.vue/], // 设置忽略文件，用正则做目录名匹配 landscape: false, // 是否处理横屏情况 // include: [/mobile/], // 只对/src/views/mobile下的文件做转换 } } } }

【本文地址】

如何在PC端项目中，嵌入H5页面（vue移动端适配）

如何在PC端项目中，嵌入H5页面（vue移动端适配）

今日新闻

推荐新闻